<template>
  <div class="main">
    <p class="top-line"></p>
    <span class="left-menu-btn" @click="showLeftMenu">
      <i v-show="isLeft" class="el-icon-s-fold"></i>
      <i v-show="!isLeft" class="el-icon-s-unfold"></i>
    </span>
    <div class="ss-flex">
      <transition mode="out-in"
                  name="custom-classes-transition"
                  enter-active-class="animated slideInLeft"
                  leave-active-class="animated slideOutLeft">
        <div class="left-menu" v-show="isLeft">
          <div>
            <section class="header-img"></section>
            <section class="intro">
              <p>simple</p>
              <p>有人欢喜有人愁，简单=无忧</p>
            </section>
            <el-row class="contact">
              <el-col :span="12">
                <a href="https://gitee.com/sxd_my" title="https://gitee.com/sxd_my" target="_blank">码云</a>
              </el-col>
              <el-col :span="12">
                <a href="mailto:1447707563@qq.com" title="1447707563@qq.com" target="_blank">邮件</a>
              </el-col>
            </el-row>
          </div>
        </div>
      </transition>
      <div class="main-box">
        <p style="text-align: center;margin-bottom: 30px"><span class="title txtwav flip" ref="title">简单的博客</span></p>
        <NavMenu :menuList="menuList"></NavMenu>
        <transition mode="out-in"
                    name="custom-classes-transition"
                    enter-active-class="animated fadeInDown"
                    leave-active-class="animated fadeOutUp">
          <router-view></router-view>
        </transition>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "index";
</style>
